<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <script>
        function phoneCheck() {
            var phoneError = $("#phoneError");
            var phoneDIV=$("#phoneDIV");
            $.post({
                url: "/phoneCheck",
                data: {'phone': $("#phone").val()},
                success: function (data) {
                    if (data.toString() === '') {
                        phoneError.css("color", "green");
                        phoneDIV.removeClass("has-error");
                        phoneDIV.addClass("has-success")
                    } else {
                        phoneError.css("color", "red");
                        phoneDIV.removeClass("has-success");
                        phoneDIV.addClass("has-error")
                    }
                    phoneError.html(data);
                }
            });
        }

        function pwdCheck() {
            var pwdError = $("#pwdError");
            var pwdDIV=$("#pwdDIV");
            $.post({
                url: "/pwdCheck",
                data: {'password': $("#password").val()},
                success: function (data) {
                    if (data.toString() === '') {
                        pwdError.css("color", "green");
                        pwdDIV.removeClass("has-error");
                        pwdDIV.addClass("has-success")
                    }
                    else {
                        pwdError.css("color", "red");
                        pwdDIV.removeClass("has-success");
                        pwdDIV.addClass("has-error")
                    }
                    pwdError.html(data);
                }
            });
        }

        function canSubmit() {
            return $("#phoneError").css('color') === 'rgb(0, 128, 0)' && $("#pwdError").css('color') === 'rgb(0, 128, 0)';
        }

    </script>
</head>



<body>

<div class="container">
    <div class="row">
            <div class="col-md-6 col-md-offset-3" style="margin-top: 8%" >
                <h2 class="text-center">智能处方管理系统</h2>
                <form role="form" id="loginForm" action="login" method="post" onsubmit="return canSubmit()">
                    <div class="form-group input-group-lg" style="margin-top: 53px" id="phoneDIV">
                        <input type="text" class="form-control"  placeholder="手机号" id="phone" name="phone" onblur="phoneCheck()">
                    </div>

                        <p class="text-danger" style="font-size: medium;color: red" id="phoneError"></p>

                    <div class="form-group input-group-lg" style="margin-top: 5px" id="pwdDIV">
                        <input type="password" class="form-control"  placeholder="密码" id="password" name="password" onblur="pwdCheck()">
                    </div>

                        <p class="text-danger" style="font-size: medium;color: red" id="pwdError"></p>

                    <div style="margin-top: 5px"><button type="submit" class="btn btn-block btn-primary btn-lg" onclick="phoneCheck();pwdCheck();"> 登录</button></div>
                    <div style="margin-top: 15px">
                        <p class="text-danger" style="font-size: medium;color: red" th:text="${loginMsg}">不好意思，系统出错了</p>
                    </div>
                </form>
            </div>
        <div class="col-md-3 col-md-offset-4" style="margin-top: 20px">
            <address>
                <a th:href="@{/toRegist}">没有账户？</a>
            </address>
        </div>
        <div class="col-md-2" style="margin-top: 20px">
            <address>
                <a th:href="@{/findPwd}">忘记密码？</a>
            </address>
        </div>

    </div>
</div>



</body>
</html>